<template>
	<div class="mine">
		<div class="box">
			<div class="hearderBox">
				<div class="hearderBoxIcon" @click="goBack">
					<img src="../../assets/images/fanhuijiantou.png" alt="">
				</div>
				银行卡管理
			</div>
			<div class="fill-content">
				<div class="m-input-field">
					<div class="content required" :class="[focusnamestyle ? 'focus':'', blurnamestyle ? 'error':'', name != '' ? 'noempty' : '']">
						<div class="input-block">
							<label for="firstname">开户人名字</label>
							<input @focus="focusname()" @blur="blurname()" id="firstname" type="text" v-model="name" >
						</div>
					</div>
					<div class="info-msg">
						<img v-if="!blurnamestyle" src="../../assets/images/zhuyi.png" alt="" />
						<img v-else src="../../assets/images/zhuyitow.png" alt="" />
						<div v-if="!blurnamestyle">必须与您的银行帐户姓名一致，否则无法进行取款</div>
						<div v-else class="warning">必填</div>
					</div>
				</div>
				<div class="mc-form-item" @click="drawer = true">
					<div class="mc-input-field-label">收款银行</div>
					<div class="mc-input-base1">{{selectbank}}</div>
					<img src="../../assets/images/add.png" alt="">
				</div>
				<div class="m-input-field">
					<div class="content required" :class="[focusbankcardstyle ? 'focus':'', blurbankcardstyle ? 'error':'', bankcard != '' ? 'noempty' : '']">
						<div class="input-block">
							<label for="firstname">银行账号</label>
							<input @focus="focusbankcard()" @blur="blurbankcard()" id="firstname" type="text" v-model="bankcard" >
						</div>
					</div>
					<div class="info-msg">
						<img v-if="!blurbankcardstyle" src="../../assets/images/zhuyi.png" alt="" />
						<img v-else src="../../assets/images/zhuyitow.png" alt="" />
						<div v-if="!blurbankcardstyle">请输入您的银行账号</div>
						<div v-else class="warning">必填</div>
					</div>
				</div>
				<div class="m-input-field">
					<div class="content required" :class="[focuswangdianstyle ? 'focus':'', blurwangdianstyle ? 'error':'', wangdian != '' ? 'noempty' : '']">
						<div class="input-block">
							<label for="firstname">开户行网点</label>
							<input @focus="focuswangdian()" @blur="blurwangdian()" id="firstname" type="text" v-model="wangdian" >
						</div>
					</div>
					<div class="info-msg">
						<img v-if="!blurwangdianstyle" src="../../assets/images/zhuyi.png" alt="" />
						<img v-else src="../../assets/images/zhuyitow.png" alt="" />
						<div v-if="!blurwangdianstyle">请输入您的开户行网点</div>
						<div v-else class="warning">必填</div>
					</div>
				</div>
				<div class="btn-group">
					<el-button class="refresh" @click="submit()">确认</el-button>
				</div>
			</div>
		</div>
		<el-drawer :visible.sync="drawer" direction="btt" :show-close="false">
			<div class="nrc-tabs" style="margin-top: 20px;">
				<div class="nrc-tabs-nav">
					<span class="nrc-tabs-tab" :class="tab == 0 ? 'active':''" @click="tab = 0">全部</span>
				</div>
				<div class="nrc-tab-pane" v-if="tab == 0">
					<div class="item" :class="selectbank == item ? 'active':''" v-for="(item,index) in bank" :key="index" @click="selectfanli(item)">{{item}}</div>
				</div>
			</div>
		</el-drawer>
		<!-- <div class="buttons">
			<img src="../../assets/images/xiaoxi.png" alt="" />
		</div> -->
	</div>
</template>

<script>
	import { newbindbank,banklist } from "../../utils/api.js"
	export default {
		data() {
			return {
				name:'',
				bankcard:'',
				wangdian:'',
				focusnamestyle:false,
				blurnamestyle:false,
				focusbankcardstyle:false,
				blurbankcardstyle:false,
				focuswangdianstyle:false,
				blurwangdianstyle:false,
				
				drawer: false,
				tab:0,
				bank:[],
				selectbank:''
			}
		},
		created() {},
		mounted() {
			// this.getbanklist()
		},
		methods: {
			getbanklist(){
				banklist().then((res) => {
					if(res.status.errorCode == 0){
						this.bank = res.data
						this.selectbank = res.data[1]
					}else{
						this.$message.error(res.status.msg);
					}
				}).catch((err)=>{
					console.log(err,'err')
				});
			},
			selectfanli(e){
				this.selectbank = e
				this.drawer = false
			},
			focusname(){
				this.focusnamestyle = true
				this.blurnamestyle = false
			},
			blurname(){
				this.focusnamestyle = false
				if(this.name == ''){
					this.blurnamestyle = true
				}
			},
			focusbankcard(){
				this.focusbankcardstyle = true
				this.blurbankcardstyle = false
			},
			blurbankcard(){
				this.focusbankcardstyle = false
				if(this.bankcard == ''){
					this.blurbankcardstyle = true
				}
			},
			focuswangdian(){
				this.focuswangdianstyle = true
				this.blurwangdianstyle = false
			},
			blurwangdian(){
				this.focuswangdianstyle = false
				if(this.wangdian == ''){
					this.blurwangdianstyle = true
				}
			},
			submit(){
				let that = this;
				if(this.name == ''){
					this.$message.error('请输入开户人名字');
					return false
				}
				if(this.psd == ''){
					this.$message.error('请输入收款银行');
					return false
				}
				if(this.bankcard == ''){
					this.$message.error('请输入银行账号');
					return false
				}
				if(this.wangdian == ''){
					this.$message.error('请输入开户行网点');
					return false
				}
				let data = {
					bank_username:this.name,
					bank_name:this.selectbank,
					bank_card:this.bankcard,
					bank_branch_name:this.wangdian
				}
				newbindbank(data).then((res) => {
					if(res.status.errorCode == 0){
						this.$message.success(res.status.msg);
						setTimeout(function(){
							that.$router.go(-1)
						},1000)
					}else{
						this.$message.error(res.status.msg);
					}
				}).catch((err)=>{
					console.log(err,'err')
				});
			},
			goBack() {
				this.$router.go(-1)
			}
		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
	}
	
	.mine {
		position: relative;
		/* padding-bottom: calc(50px + env(safe-area-inset-bottom)); */
	}
	
	.box {
    background-color: #f9f9f9;
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}
	
	.buttons {
		position: fixed;
		bottom: 10%;
		right: 10px;
		background-color: #99D2E3;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.buttons img {
		width: 32px;
		height: 32px;
	}
	
	
	.hearderBox {
		width: 100%;
		height: 45px;
		background-color: #fff;
		position: fixed;
		top: 0;
		font-weight: 300;
		line-height: 45px;
		text-align: center;
		font-size: 20px;
		color: #545658;
		box-shadow: inset 0 -1px 0 #ececec;
		left: 0;
		overflow: hidden;
		z-index: 99;
	}
	
	.hearderBoxIcon {
		width: 50px;
		position: fixed;
		top: 3px;
		left: 0px;
	}
	
	.hearderBoxIcon img {
		width: 20px;
		height: 20px;
	}
	
	.fill-content{
		padding: 4%;
		padding-top: 0px;
		margin-top: 55px;
	}
	.m-input-field{
		margin-bottom: 10px;
		width: 100%;
	}
	.m-input-field .content {
	    border-radius: 5px;
	    box-sizing: border-box;
	    display: flex;
	    height: 54px;
	    justify-content: space-around;
	    padding: 0 15px;
	}
	.m-input-field .content {
	    background-color: #fbfbfb;
	    border: 1px solid #e9e9e9;
	}
	.input-block{
		box-sizing: border-box;
		position: relative;
		width: 100%;
	}
	label{
		padding-left: 12px;
		line-height: 1.29;
		pointer-events: none;
		position: absolute;
		top: 18px;
		transition: .2s;
		color: #545658;
		font-family: NotoSans;
		font-size: 14px;
	}
	label:before {
	    bottom: 0;
	    color: #e94951;
	    content: "*";
	    font-size: 10px;
	    left: 0;
	    margin: auto;
	    position: absolute;
	    top: 4px;
	}
	.input-block input{
		background-color: transparent;
		color: #545658;
		outline: none;
	}
	.m-input-field .content .input-block input {
	    border: none;
	    box-sizing: border-box;
	    height: 100%;
	    position: absolute;
	    top: 0;
	    transition: .2s;
	    width: 100%;
	}
	.m-input-field .content.focus{
		border: 1px solid #5235ff;
		background-color: #fff!important;
		border-color: rgba(114,64,255,.5)!important;
		box-shadow: 0 0 0 2px rgba(114,64,255,.1)!important;
	}
	.m-input-field .content.focus label,.m-input-field .content.noempty label {
	    top: 8px;
	}
	.m-input-field .content.focus input,.content.noempty input {
	    box-shadow: none;
	    font-size: 14px;
	    height: 28px !important;
	    line-height: 1.13;
	    top: 24px !important;
	}
	.m-input-field .content.error {
	    border: 1px solid #e94951;
	    color: #e94951;
	}
	.info-msg{
		color: #939698;
		font-family: PingFangTC;
		font-size: 10px;
		margin: 5px 0 10px;
		display: flex;
	}
	.info-msg img{
		width: 14px;
		height: 14px;
		margin-right: 4px;
	}
	.info-msg div{
		color: #939698;
		font-family: PingFangTC;
		font-size: 10px;
		line-height: 14px;
	}
	.info-msg .warning{
		color: #e94951;
		line-height: 14px;
		font-size: 13px;
	}
	.action-block{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		width: 15%;
	}
	.action-block img{
		width: 24px;
		height: 24px;
	}
	
	.btn-group{
		display: flex;
		justify-content: space-between;
		margin-top: 70px;
	}
	.refresh{
		background: #5235ff;
		margin: auto;
		border-radius: 5px;
		color: #fff;
		font-family: NotoSans;
		font-size: 16px;
		font-weight: 500;
		padding: 10px 0;
		width: 100%;
		height: 44px;
	}
	
	.mc-form-item{
		margin-top: 10px;
		background: #fff;
		border: 1px solid #ececec;
		border-radius: 5px;
		display: block;
		min-height: 54px;
		position: relative;
		transition: .8s;
		margin-bottom: 10px;
	}
	.mc-form-item img{
		position: absolute;
		right: 16px;
		top: 35%;
		width: 18px;
		height: 18px;
	}
	.mc-input-field-label{
		font-size: 10px;
		top: 8px;
		color: #939698;
		padding-left: 15px;
		position: absolute;
		transition: .2s;
	}
	.mc-input-base1{
		box-shadow: none;
		font-size: 14px;
		height: 28px;
		top: 24px;
		padding: 0 15px;
		position: absolute;
		width: 100%;
		background-color: transparent;
		color: #545658;
		display: flex;
	}
	
	/deep/ .el-drawer{
		height: 75vh !important;
	}
	/deep/ .el-drawer__header{
		margin: 0;
		padding: 0;
	}
	.nrc-tabs-nav{
		align-items: center;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	.nrc-tabs-tab{
		height: auto;
		opacity: .7;
		box-sizing: border-box;
		display: block;
		font-size: 16px;
		font-stretch: normal;
		font-style: normal;
		font-weight: 300;
		min-width: 65px;
		text-align: center;
		padding: 4px 8px;
		width: 25%;
	}
	.nrc-tabs-tab.active{
		background-image: inherit;
		border-bottom: inherit;
		color: inherit;
		font-weight: 700;
		opacity: 1;
	}
	.nrc-tab-pane{
		padding: 24px 13px 0;
	}
	.nrc-tab-pane .item{
		flex: 1;
		height: 30px;
		align-items: center;
		display: flex;
		justify-content: center;
		border:1px solid #000;
		/* box-shadow: 0 0 5px 2px rgba(82,53,255,.8); */
		background-color: #fafafc;
		border-radius: 5px;
		margin-bottom: 20px;
		min-height: 42px;
		padding: 7px 9px;
	}
	.nrc-tab-pane .item.active{
		border-color: rgba(82,53,255,.8);
		box-shadow: 0 0 5px 2px rgba(82,53,255,.8);
	}
	
	.buttons{
		position: fixed;
		bottom: 10%;
		right: 10px;
		background-color: #99D2E3;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.buttons img{
		width: 32px;
		height: 32px;
	}
</style>